<!DOCTYPE html>
<html lang="zh-CN">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title></title>
    <script src="./js/vue.js"></script>
</head>

<body>
    <div id="app">
        <div :style="{fontSize:size+'px'}">
            <btn-primary title="这是父组件传递的值" @change2="changeSize"></btn-primary>
        </div>
        <!-- <div>
            <btn-primary :title="msg" :change="changeSize"></btn-primary>
        </div> -->
    </div>

    <!-- <div id="app2">
        <btn-primary></btn-primary>
        <btn-primary></btn-primary>
    </div> -->

    <script>

        /*
            组件名称不推荐出现大写字母  使用 (-) + (小写)
            Vue.component定义的是全局组件 Vue实例都可以使用
            data必须是一个函数，返回值必须是一个对象

        */

        /*
        子组件电泳父组件
        1.prop的方式，:click='changeSize' 将函数直接传递到子组件 @click='change'
        *** 2.$emit的方式, @change='changeSize'，将函数名字传递到子组件 @click='$emit("change2")'
        */

        Vue.component("btn-primary", {
            data() {
                return {
                    count: 0
                }
            },
            props: ["title", "click2"],//同名变量
            methods: {
                click() {
                    this.count++;
                }
            },
            template: "<div><button @click='change'>{{count}}--{{title}}</button> <a href='' @click.prevent='$emit(\"change2\")'>65654</a></div>"
        })

        let vm = new Vue({
            el: "#app",
            data: {
                msg: "这是父组件的msg",
                size: 20
            },
            methods: {
                changeSize() {
                    this.size += 5;
                }
            }
        })

        // let vm2 = new Vue({
        //     el: "#app2",
        //     data: {

        //     }
        // })

    </script>
</body>

<html>